<div class="flex gap-4 sm:gap-6">
  <details class="group relative">
    <summary
      class="flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 [&::-webkit-details-marker]:hidden"
    >
      <span class="text-sm font-medium"> Availability </span>

      <span class="transition-transform group-open:-rotate-180">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-4"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      </span>
    </summary>

    <div
      class="z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
    >
      <div class="flex items-center justify-between px-3 py-2">
        <span class="text-sm text-gray-700"> 0 Selected </span>

        <button
          type="button"
          class="text-sm text-gray-700 underline transition-colors hover:text-gray-900"
        >
          Reset
        </button>
      </div>

      <fieldset class="p-3">
        <legend class="sr-only">Checkboxes</legend>

        <div class="flex flex-col items-start gap-3">
          <label for="Option1" class="inline-flex items-center gap-3">
            <input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option1" />

            <span class="text-sm font-medium text-gray-700"> Option 1 </span>
          </label>

          <label for="Option2" class="inline-flex items-center gap-3">
            <input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option2" />

            <span class="text-sm font-medium text-gray-700"> Option 2 </span>
          </label>

          <label for="Option3" class="inline-flex items-center gap-3">
            <input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option3" />

            <span class="text-sm font-medium text-gray-700"> Option 3 </span>
          </label>
        </div>
      </fieldset>
    </div>
  </details>

  <details class="group relative">
    <summary
      class="flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 [&::-webkit-details-marker]:hidden"
    >
      <span class="text-sm font-medium"> Price </span>

      <span class="transition-transform group-open:-rotate-180">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-4"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
        </svg>
      </span>
    </summary>

    <div
      class="z-auto w-64 divide-y divide-gray-300 rounded border border-gray-300 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
    >
      <div class="flex items-center justify-between px-3 py-2">
        <span class="text-sm text-gray-700"> Max price is $600 </span>

        <button
          type="button"
          class="text-sm text-gray-700 underline transition-colors hover:text-gray-900"
        >
          Reset
        </button>
      </div>

      <div class="flex items-center gap-3 p-3">
        <label for="MinPrice">
          <span class="text-sm text-gray-700"> Min </span>

          <input
            type="number"
            id="MinPrice"
            value="0"
            class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
          />
        </label>

        <label for="MaxPrice">
          <span class="text-sm text-gray-700"> Max </span>

          <input
            type="number"
            id="MaxPrice"
            value="600"
            class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
          />
        </label>
      </div>
    </div>
  </details>
</div>
